<template>
  <view class="store-details-page">
    <!-- 门店图片轮播 -->
    <view class="store-images">
      <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
        <swiper-item v-for="(image, index) in storeImages" :key="index">
          <image :src="image" mode="aspectFill" class="store-image"></image>
        </swiper-item>
      </swiper>
      <view class="image-indicator">1/{{storeImages.length}}</view>
    </view>
    
    <!-- 门店基本信息 -->
    <view class="store-info-section">
      <view class="store-name">{{storeInfo.name}}</view>
      <view class="store-rating">
        <view class="stars">
          <text class="star filled" v-for="i in storeInfo.rating" :key="i">★</text>
          <text class="star" v-for="i in (5 - storeInfo.rating)" :key="i + storeInfo.rating">★</text>
        </view>
        <text class="rating-score">{{storeInfo.rating}}分</text>
        <text class="sales-info">销量: {{storeInfo.sales}}</text>
      </view>
      <view class="business-hours">营业时间: {{storeInfo.businessHours}}</view>
      <view class="store-address" @click="openMap">
        <text>{{storeInfo.address}}</text>
        <image src="@/img/车联网服务-03车辆维修-03门店详情_slices/plane@3x.png" class="nav-icon"></image>
      </view>
    </view>
    
    <!-- 服务项目 -->
    <view class="service-section">
      <view class="section-title">服务项目</view>
      <view class="service-list">
        <view class="service-item" v-for="(service, index) in serviceList" :key="index">
          <view class="service-name">{{service.name}}</view>
          <view class="service-price">
            <text class="current-price">¥ {{service.currentPrice}}</text>
            <text class="original-price">¥ {{service.originalPrice}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 服务评价 -->
    <view class="review-section">
      <view class="section-title">服务评价</view>
      <view class="review-list">
        <view class="review-item" v-for="(review, index) in reviewList" :key="index">
          <view class="review-header">
            <view class="user-info">
              <image :src="review.avatar" class="user-avatar"></image>
              <text class="user-name">{{review.userName}}</text>
            </view>
            <view class="review-rating">
              <text class="star filled" v-for="i in review.rating" :key="i">★</text>
              <text class="star" v-for="i in (5 - review.rating)" :key="i + review.rating">★</text>
            </view>
            <text class="review-date">{{review.date}}</text>
          </view>
          <view class="review-content">{{review.content}}</view>
        </view>
      </view>
    </view>
    
    <!-- 底部预约按钮 -->
    <view class="bottom-action">
      <button class="book-btn" @click="bookService">立即预约</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      storeInfo: {
        name: "伟业汽车维修厂(人民路店)",
        rating: 3,
        sales: 322,
        businessHours: "周一至周五 09:00-22:00",
        address: "山阳区人民中路32号",
        phone: "18893029302",
        longitude: 113.2145,
        latitude: 35.2478,
        image:  require("@/img/车辆维修/维修厂1.jpeg") // 添加门店图片字段
      },
      storeImages: [
	  require("@/img/车辆维修/维修厂1.jpeg"),
	  require("@/img/车辆维修/维修厂1.jpeg"),
	  require("@/img/车辆维修/维修厂1.jpeg"),
	  require("@/img/车辆维修/维修厂1.jpeg"),
	  require("@/img/车辆维修/维修厂1.jpeg")
      ],
      serviceList: [
        {
          name: "工时价格 (每小时)",
          currentPrice: "199",
          originalPrice: "299"
        },
        {
          name: "轮胎",
          currentPrice: "199",
          originalPrice: "299"
        },
        {
          name: "机油更换",
          currentPrice: "199",
          originalPrice: "299"
        },
        {
          name: "刹车片",
          currentPrice: "199",
          originalPrice: "299"
        }
      ],
      reviewList: [
        {
          userName: "李**",
          avatar: "@/img/车辆维修/维修厂1.jpeg",
          rating: 3,
          date: "2022-09-10",
          content: "服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容"
        },
        {
          userName: "张**",
          avatar: "@/img/车辆维修/维修厂1.jpeg",
          rating: 4,
          date: "2022-09-08",
          content: "服务态度很好，技术专业，价格合理，推荐大家来这家店维修。"
        }
      ]
    }
  },
  
  onLoad(options) {
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: '门店详情'
    });
    
    console.log('storeDetails页面加载，接收到的参数:', options);
    
    // 接收传递的门店信息
    if (options.storeData) {
      try {
        const storeData = JSON.parse(decodeURIComponent(options.storeData));
        console.log('接收到的门店数据:', storeData);
        
        // 合并门店数据
        this.storeInfo = { ...this.storeInfo, ...storeData };
        
        // 更新轮播图片，将传递的门店图片作为第一张
        if (storeData.image) {
          this.storeImages[0] = storeData.image;
        }
        
        // 如果没有图片，使用默认图片
        if (!storeData.image && storeData.name) {
          this.storeImages[0] = require("@/img/车辆维修/维修厂1.jpeg");
        }
        
        console.log('更新后的门店信息:', this.storeInfo);
      } catch (e) {
        console.error('解析门店数据失败：', e);
        uni.showToast({
          title: '数据加载失败',
          icon: 'none'
        });
      }
    } else {
      console.log('没有接收到门店数据，使用默认数据');
    }
  },
  
  methods: {
    // 打开地图导航
    openMap() {
      // 跳转到导航页面
      uni.navigateTo({
        url: `/pages/maintenanceNavigation/maintenanceNavigation?destinationData=${encodeURIComponent(JSON.stringify(this.storeInfo))}`,
        success: () => {
          console.log('跳转到导航页面成功');
        },
        fail: (err) => {
          console.error('跳转到导航页面失败：', err);
          // 如果跳转失败，使用系统导航作为备选方案
          uni.openLocation({
            latitude: this.storeInfo.latitude,
            longitude: this.storeInfo.longitude,
            name: this.storeInfo.name,
            address: this.storeInfo.address,
            success: () => {
              console.log('打开系统导航成功');
            },
            fail: (err) => {
              console.error('打开系统导航失败：', err);
              uni.showToast({
                title: '打开导航失败',
                icon: 'none'
              });
            }
          });
        }
      });
    },
    
    // 预约服务
    bookService() {
      // 跳转到立即预约页面
      uni.navigateTo({
        url: `/pages/bookNow/bookNow?storeData=${encodeURIComponent(JSON.stringify(this.storeInfo))}`,
        success: () => {
          console.log('跳转到预约页面成功');
        },
        fail: (err) => {
          console.error('跳转到预约页面失败：', err);
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.store-details-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 门店图片轮播 */
.store-images {
  position: relative;
  height: 400rpx;
}

.swiper {
  width: 100%;
  height: 100%;
}

.store-image {
  width: 100%;
  height: 100%;
}

.image-indicator {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

/* 门店基本信息 */
.store-info-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.store-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.store-rating {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.stars {
  display: flex;
  margin-right: 15rpx;
}

.star {
  font-size: 28rpx;
  color: #ddd;
  margin-right: 5rpx;
}

.star.filled {
  color: #FFD700;
}

.rating-score {
  font-size: 26rpx;
  color: #666;
  margin-right: 20rpx;
}

.sales-info {
  font-size: 26rpx;
  color: #666;
}

.business-hours {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.store-address {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666;
  cursor: pointer;
}

.nav-icon {
  width: 32rpx;
  height: 32rpx;
  margin-left: 10rpx;
  flex-shrink: 0;
}

/* 服务项目 */
.service-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.service-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.service-item:last-child {
  border-bottom: none;
}

.service-name {
  font-size: 28rpx;
  color: #333;
}

.service-price {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.current-price {
  font-size: 28rpx;
  color: #ff4757;
  font-weight: bold;
}

.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

/* 服务评价 */
.review-section {
  background-color: #fff;
  padding: 30rpx 30rpx 150rpx 30rpx;
  margin-bottom: 300rpx;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.review-item {
  border-bottom: 1rpx solid #f5f5f5;
  padding-bottom: 30rpx;
}

.review-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}

.user-name {
  font-size: 26rpx;
  color: #333;
}

.review-rating {
  display: flex;
  align-items: center;
}

.review-date {
  font-size: 24rpx;
  color: #999;
}

.review-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

/* 底部预约按钮 */
.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
  z-index: 100;
}

.book-btn {
  width: 100%;
  height: 80rpx;
  background-color: #007AFF;
  color: #fff;
  border: none;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: bold;
}
</style>
